<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DataGrid with Toolbar - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo/demo.css">
    <script type="text/javascript" src="../jquery.min.js"></script>
    <script type="text/javascript" src="../jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../jquery.serializeObject.js"></script>
    <style>
        a {
            color: #fff;
            padding: 5px 5px;
            background: red;
            text-decoration: none;
            border-radius: 4px;
        }
    </style>
</head>
<body>


<table id="dg">

</table>
<div id="dd" class="easyui-dialog" title='My Dialog' data-options="closed:true,cache: false,modal: true"
     style="width: 400px;height: 200px">
    <form id="ff" method="post" style="width:100%;max-width:300px;padding:30px 20px;">
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="username" style="width:100%" data-options="label:'用户名:',required:true">
        </div>
        <div>
            <input class="easyui-textbox" name="password" style="width:100%" data-options="label:'密码:',required:true">
        </div>
        <input type="text" name="_id" style="height:0;border:0;opacity:0;position: absolute;">
    </form>
    <div style="text-align:center;padding:5px 0">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
    </div>
</div>

<div id="tb" style="padding:2px 5px;">
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="addUser()">Add</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick="removeUsers()" style="margin-right:20px">cut</a>
    keywords: <input id="keywords" class="easyui-textbox" style="width:110px">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" onclick="searchUser()">Search</a>
</div>


<script type="text/javascript">
	function addUser() {
		$('#ff').form('clear');
		$('#dd').dialog('open');
	}
	function removeUsers() {
		var data = $('#dg').datagrid('getSelections');
		if(!data.length>0){
			$.messager.show({
				title: 'tip',
				msg: '请选择要删除的用户',
				timeout: 5000,
				showType: 'slide'
			});
        }else{
			var ids = [];
			for (var i in data) {
				ids.push(data[i]._id)
			}
			$.messager.confirm('Confirm', 'Are you sure you want to delete nodes?', function (r) {
				if (r) {
					$.ajax({
						url: 'http://localhost:3000/users/remove',
						data: {ids: ids.toString()},
						method: 'post',
						success: function (res) {
							console.log(222);
							$.messager.show({
								title: 'tip',
								msg: '用户删除成功',
								timeout: 5000,
								showType: 'slide'
							});
							$('#dg').datagrid('reload');
						}
					})
				}
			})
        }

	}
	
	function searchUser() {
		var keytext = $("#keywords").val();
        $.ajax({
            url:"http://localhost:3000/users/list",
            method:"post",
            data:{username:keytext}
        }).done(res=>{
        	$("#dg").datagrid('loadData',res);
        })
	}
	//	var toolbar = [{
	//		text: 'Add',
	//		iconCls: 'icon-add',
	//		handler: function () {
	//			$('#ff').form('clear');
	//			$('#dd').dialog('open');
	//		}
	//	}, {
	//		text: 'Cut',
	//		iconCls: 'icon-cut',
	//		handler: function () {
	//			var data = $('#dg').datagrid('getSelections');
	//			var ids = [];
	//			for (var i in data) {
	//				ids.push(data[i]._id)
	//			}
	//			$.messager.confirm('Confirm', 'Are you sure you want to delete nodes?', function (r) {
	//				if (r) {
	//					$.ajax({
	//						url: 'http://localhost:3000/users/remove',
	//						data: {ids: ids.toString()},
	//						method: 'post',
	//						success: function (res) {
	//							console.log(222);
	//							$.messager.show({
	//								title: 'tip',
	//								msg: '用户删除成功',
	//								timeout: 5000,
	//								showType: 'slide'
	//							});
	//							$('#dg').datagrid('reload');
	//						}
	//					})
	//				}
	//			})
	//		}
	//	}, '-', {
	//		text: 'search',
	//		iconCls: 'icon-search',
	//		handler: function () {
	//			alert('save')
	//		}
	//	}];
	$('#dg').datagrid({
		method: "post",
		toolbar: '#tb',
		fit: true,
		pagination: true,
		url: 'http://localhost:3000/users/list',
		onDblClickRow: function (index, row) {
			console.log(row);
			editData(row);
		},
		columns: [[
			{field: 'ck', title: '全选', width: 200, align: 'center', checkbox: true},
			{field: '_id', title: 'id', width: 200, align: 'center'},
			{field: 'username', title: 'username', width: 200, align: 'center'},
			{field: 'password', title: 'password', width: 200, align: 'center'},
			{
				field: 'opt', title: '操作', width: 200, align: 'center',
				formatter: function (value, row, index) {
					return "<a class='a1' href='javascript:void(0)' onclick='changed(this)' style='margin:0 10px' style='margin:0 10px'>编辑</a> <a class='a2' href='javascript:void(0)' onclick='remove(this)'>删除</a>"

				}
			}
		]],
		onLoadSuccess:function(data){
			$('.a1').linkbutton({toggle:true,group:'g1'});
			$('.a2').linkbutton({toggle:true,group:'g1'});
		}
	});

	function submitForm() {
		$('#ff').form('submit', {
			onSubmit: function () {
				var isValid = $(this).form('validate');
				if (isValid) {
					var data = $('#ff').serializeObject();
					if (!(data._id && data._id.trim().length > 0)) {
						//add model
						delete data._id;
						$.ajax({
							url: "http://localhost:3000/users/data",
							method: 'post',
							data: data,
							success: function (res) {
								$('#ff').form('clear');
								$('#dd').dialog('close');
								progress();
							}
						})
					} else {
						//edit model
						$.ajax({
							url: "http://localhost:3000/users/data/" + data._id,
							method: 'post',
							data: data,
							success: function (res) {
								$('#ff').form('clear');
								$('#dd').dialog('close');
								progress();
							}
						})
					}
				}
			}
		});
	}
	function clearForm() {
		$('#ff').form('clear');
	}

	function progress() {
		var win = $.messager.progress({
			title: 'Please waiting',
			msg: 'Loading data...'
		});
		setTimeout(function () {
			$.messager.progress('close');
			$('#dg').datagrid('reload');
			slide();
		}, 2500)
	}

	function slide() {
		$.messager.show({
			title: 'tip',
			msg: 'data change successful',
			timeout: 5000,
			showType: 'slide'
		});
	}

	function editData(row) {
		$('#ff').form('load', row);
		$('#dd').dialog('open');
	}

	function getData(obj) {
		var arr = {};
		$(obj).parents('tr').children('td').each(function (index, ele) {
			if (index >= 1 && index <= 3) {
				arr[$(ele).attr('field')] = $(ele).text();
			}
		})
		return arr;
	}
	function changed(obj) {
		var arr = getData(obj);
		$('#ff').form('load', arr);
		$('#dd').dialog('open');
	}

	function remove(obj) {
		$.messager.confirm('Confirm', 'Are you sure you want to delete record?', function (r) {
			if (r) {
				var id = getData(obj)._id;
				$.ajax({
					url: "http://localhost:3000/users/data/" + id,
					method: "delete",
				}).done(res => {
					$('#dg').datagrid('reload');
					slide();
				})
			}
		});

	}
</script>
</body>
</html>